<script setup lang="ts">
import {PropType} from "vue-demi";

const props = defineProps({
  result: {
    type: Array as PropType<{ tableName: string, name: string, id: number, index: number }[]>,
    default: () => [],
  },
  parseType: {
    type: String,
    default: () => 'city',
  }
});
const emit = defineEmits(['delete']);
const columns = ref([
  {
    dataIndex: 'index',
    title: '#',
    width: 60,
  },
  {
    dataIndex: 'name',
    title: props.parseType == 'city' ? '城市' : '省份',
  },
  {
    dataIndex: 'handle',
    title: '操作',
    width: 120,
    align: 'center',
    dataType: 'custom',
    slot: 'handle',
  }
]);
const selectedRows = ref<any[]>([]);
watch(() => props.parseType, () => {
  columns.value[1].title = props.parseType == 'city' ? '城市' : '省份';
})
const box = ref<HTMLElement | null>(null);
const boxHeight = ref<Number>(0);
watch(() => box.value, (v) => {
  if (v) {
    boxHeight.value = v.offsetHeight;
  }
})
onMounted(() => {
  if (box.value) {
    boxHeight.value = box.value.offsetHeight;
  }
})
window.addEventListener('resize',()=>{
  if (box.value) {
    boxHeight.value = box.value.offsetHeight;
  }
})
</script>

<template>
  <div ref="box" style="height: 100%;">
    <base-table :data-source="result" :selection="true" row-key="id" v-model:selected-rows="selectedRows"
                :columns="columns"
                :scroll="{
                  y:boxHeight-100
                }"
    >
      <template #header>
        <a-row type="flex" style="padding: 0 10px 10px 10px;">
          <a-col flex="1">
            解析结果
          </a-col>
          <a-col>
            <a-button danger size="small" @click="emit('delete',selectedRows)">
              批量删除
            </a-button>
          </a-col>
        </a-row>
      </template>
      <template #handle="row">
        <a-button size="small" type="link" danger @click="emit('delete',[row])">
          删除
        </a-button>
      </template>
    </base-table>

  </div>
</template>

<style scoped>

</style>
